<template>
  <div>
    <pageHeader></pageHeader>
    <div class="video-part">
      <div class="video-title">
        <i class="learn-course-font" v-bind:class="{ 'font-color': fontFlag }" @click="onlearn" @mouseover="comeLearn" @mouseout="leaveLearn">首页</i>
        <i>></i>
        <i>课程详情</i>
      </div>
      <div class="video-content">
        <div class="video-content-title">
          <p class="video-content-p">{{ videoData.name }}</p>
        </div>
        <div class="video-btm">
          <div class="video-left">
            <video
              class="course-video"
              width="800"
              height="498"
              @timeupdate="updateTime"
              controls="controls"
              preload="auto"
              controlslist="nodownload"
            >
              <source v-if="videoUrl != ''" :src="videoUrl" type="video/mp4" />
            </video>
          </div>
          <div class="video-right">
            <div class="video-collect">
              <div v-show="collectionFlag == 1" @click="onCollection(1)" class="collect-star">
                <img src="@/assets/img/courseware/collect.jpg" />
              </div>
              <div v-show="collectionFlag == 0" @click="onCollection(0)" class="collect-star">
                <img src="@/assets/img/courseware/uncollect.jpg" />
              </div>
              <p>{{ videoData.collectionNum }}人</p>
            </div>
            <div class="video-user">{{ videoData.collectionNum }}人学过</div>
            <div class="video-rank">综合评分：9.9分</div>
            <div class="video-time">视频时长：{{ videoData.videoTime }}</div>
            <div class="video-upload">上传时间：{{ videoData.createTime }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pageHeader from "@/components/PageHeader.vue";

export default {
  name: "video1",
  components: {
    pageHeader,
  },
  created() {
    this.init();
  },
  mounted() {},
  beforeDestroy() {
    //let cid = this.$route.query.id;
    let that = this;
    let time = new Date().valueOf();
    that
      .$http({
        url: "/wisdomlearn/userLearnRecords/updateUserRecord",
        method: "post",
        headers: {
          accessToken: that.config.token,
          appId: "appid-xinyun-0003",
          userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
          clientId: "",
          sign: that.tool.sign("/wisdomlearn/userLearnRecords/updateUserRecord", time),
          timestamp: time,
        },
        data: {
          coursewareId: this.cid,
          coursewareTimeOver: this.currentTime + "",
        },
      })
      .then((res) => {
        // if ("00000" === res.retCode) {
        // }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  data() {
    return {
      videoUrl: "",
      videoData: {},
      collectionFlag: 0,
      fontFlag: false,
      currentTime: 0,
      lastTime: 0,
      cid: "",
    };
  },
  methods: {
    init() {
      //课程数据
      this.getCourseData();
      //收藏信息
      this.getCourseCollection();
    },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
        }
      }
      return fmt;
    },
    updateTime(e) {
      if (e.target.currentTime - this.lastTime > 5) {
        e.target.currentTime = this.lastTime;
      }
      this.lastTime = e.target.currentTime;
      this.currentTime = e.target.currentTime;
    },
    getDuration() {},
    formatSeconds(value) {
      var theTime = parseInt(value); // 需要转换的时间秒
      var theTime1 = 0; // 分
      var theTime2 = 0; // 小时
      var theTime3 = 0; // 天
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60);
          theTime1 = parseInt(theTime1 % 60);
          if (theTime2 > 24) {
            //大于24小时
            theTime3 = parseInt(theTime2 / 24);
            theTime2 = parseInt(theTime2 % 24);
          }
        }
      }
      var result = "";
      if (theTime > 0) {
        result = "" + parseInt(theTime) + "秒";
      }
      if (theTime1 > 0) {
        result = "" + parseInt(theTime1) + "分" + result;
      }
      if (theTime2 > 0) {
        result = "" + parseInt(theTime2) + "小时" + result;
      }
      if (theTime3 > 0) {
        result = "" + parseInt(theTime3) + "天" + result;
      }
      return result;
    },
    onCollection(param) {
      let params1 = this.$route.params;
      let cid = this.$route.query.id;
      let _this = this;
      if (param == "0") {
        //收藏
        let time = new Date().valueOf();
        _this
          .$http({
            url: "/wisdomlearn/userCollection/insertUserCollectionInfo",
            method: "post",
            headers: {
              accessToken: _this.config.token,
              userId: JSON.parse(_this.tool.getCookie("xinyun-front-userInfo")).userId,
              appId: "appid-xinyun-0003",
              sign: _this.tool.sign("/wisdomlearn/userCollection/insertUserCollectionInfo", time),
              timestamp: time,
            },
            data: {
              collectionId: cid,
            },
          })
          .then((res) => {
            if ("00000" === res.retCode) {
              if (res.data) {
                _this.collectionFlag = "1";
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (param == "1") {
        //取消收藏
        let time = new Date().valueOf();
        _this
          .$http({
            url: "/wisdomlearn/userCollection/deleteUserCollectionInfo",
            method: "post",
            headers: {
              accessToken: _this.config.token,
              userId: JSON.parse(_this.tool.getCookie("xinyun-front-userInfo")).userId,
              appId: "appid-xinyun-0003",
              sign: _this.tool.sign("/wisdomlearn/userCollection/deleteUserCollectionInfo", time),
              timestamp: time,
            },
            data: {
              collectionId: cid,
            },
          })
          .then((res) => {
            if ("00000" === res.retCode) {
              if (res.data) {
                _this.collectionFlag = "0";
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    getCourseData() {
      this.courseInfo = this.$route.params;
      let params = this.$route.params;
      this.cid = this.$route.query.id;
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/courseware/selectCourseware",
          method: "post",
          headers: {
            appId: "appid-xinyun-0003",
            sign: that.tool.sign("/wisdomlearn/courseware/selectCourseware", time),
            timestamp: time,
          },
          data: {
            coursewareId: this.$route.query.id,
          },
        })
        .then((res) => {
          if ("00000" === res.retCode) {
            this.videoData = res.data;
            this.videoUrl = this.config.imgPath + this.videoData.videoUrl;
            this.videoData.videoTime = this.formatSeconds(this.videoData.videoTime);
            this.videoData.createTime = this.dateFormat("YYYY-mm-dd HH:MM", new Date(this.videoData.createTime));
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getCourseCollection() {
      let params = this.$route.params;
      let cid = this.$route.query.id;
      let _this = this;
      let time = new Date().valueOf();
      _this
        .$http({
          url: "/wisdomlearn/userCollection/selectUserCollection",
          method: "post",
          headers: {
            accessToken: _this.config.token,
            appId: _this.config.appId,
            userId: JSON.parse(_this.tool.getCookie("xinyun-front-userInfo")).userId,
            sign: _this.tool.sign("/wisdomlearn/userCollection/selectUserCollection", time),
            timestamp: time,
          },
          data: {
            collectionId: cid,
          },
        })
        .then((res) => {
          if ("00000" === res.retCode) {
            if (res.data) {
              this.collectionFlag = "1";
            } else {
              this.collectionFlag = "0";
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //学习课件
    onlearn() {
      this.$router.push({
        path: "/home",
      });
    },
    comeLearn() {
      this.fontFlag = true;
    },
    leaveLearn() {
      this.fontFlag = false;
    },
  },
  computed: {
    // formatData: function() {
    //   return this.dateFormat("YYYY-mm-dd HH:MM", videoData.createTime);
    // }
  },
};
</script>
<style scoped>
.course-video {
  width: 100%;
  height: 100%;
}
/* .video-title p {
  font-family: PingFangSC-Medium;
  font-size: 21px;
  color: #111111;
  letter-spacing: 0.08px;
} */
.video-title {
  padding-top: 21px;
  padding-left: 198px;
  padding-bottom: 21px;
  line-height: 21px;
  letter-spacing: 0.08px;
  font-size: 21px;
  color: #727376;
  font-family: PingFangSC-Medium;
  background-color: #faf9f9;
}
.video-user {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #f6f6f6;
  letter-spacing: 0.07px;
  padding: 50px 0px 10px 20px;
}
.video-rank {
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #f7f7f7;
  letter-spacing: 0.05px;
  padding: 10px 0px 10px 20px;
}
.video-time {
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #f8f9f8;
  letter-spacing: 0.05px;
  padding: 10px 0px 10px 20px;
}
.collect-star,
.learn-course-font {
  cursor: pointer;
}
.collect-star img {
  width: 20px;
  height: 20px;
}
.video-upload {
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #f8f9f8;
  letter-spacing: 0.05px;
  padding: 10px 0px 10px 20px;
}
.video-collect {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 44px;
}
.video-collect div {
  width: 40px;
  height: 24px;
}
.video-collect p {
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #a1a0a0;
  letter-spacing: 0.05px;
}
.video-bo {
  width: 100px;
  height: 200px;
}
.video-jie {
  width: 300px;
  height: 601px;
}
.video-left {
  margin-left: 200px;
  border: 1px solid black;
  width: 800px;
}
.video-right {
  border: 1px solid black;
  width: 240px;
  position: relative;
}
.video-btm {
  display: flex;
  height: 500px;
  margin-top: 20px;
}
.video-part {
  background-color: #fff;
  min-height: 1000px;
}
.video-content {
  margin-top: 28px;
  background-color: #2e2d2d;
  min-height: 900px;
}
.video-content-title {
  display: flex;
  align-items: center;
  height: 100px;
  font-size: 36px;
  font-family: PingFangSC-Medium;
  letter-spacing: 0.14px;
  color: #f2f2f2;
}
i {
  font-style: normal;
}
.video-content-p {
  padding-left: 200px;
}
.font-color {
  color: #084dcd;
}
</style>